<template>
  <el-tabs :tab-position="tabPosition">
    <el-tab-pane v-for="(item, index) in info" :key="index" :label="item.label">
      <div class="row row-cols-1 row-cols-lg-2">
        <div class="col my-2" v-for="(items, indexs) in item.imgSrc" :key="indexs">
          <div class="position-relative" style="overflow: hidden; width:100%;height:100%; ">
            <img :src="items.img" alt="" />
            <div class="desc">{{ items.title }}</div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: "top",
      info: [
        {
          label: "校园",
          imgSrc: [
            {
              title: "福州理工学院 | 咱们的校园",
              img:
                "https://img2.baidu.com/it/u=1550443938,1347276597&fm=253&fmt=auto&app=138&f=PNG?w=620&h=400",
            },
            {
              title: "福州理工学院 | 校园景色",
              img: "https://img1.baidu.com/it/u=120505019,3669446767&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
            }
          ],
        },
        {
          label: "操场",
          imgSrc: [
            {
              title: "福理校园 | 毕业季",
              img:
                "https://img0.baidu.com/it/u=2759221587,1195012342&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=466",
            },
            {
              title: "福理校园 | 国旗台",
              img:
                "https://img0.baidu.com/it/u=3978334957,670910402&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
            },
          ],
        },
        {
          label: "教学区",
          imgSrc: [
            {
              title: "福理校园 | 悠悠小路",
              img:
                "https://img0.baidu.com/it/u=4177728159,2006641988&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=210",
            },
            {
              title: "没想到，你是这样的福州理工学院 ",
              img:
                "https://img0.baidu.com/it/u=1244977963,470319241&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
            },
          ],
        },
        {
          label: "休闲区",
          imgSrc: [
            {
              title: "福州理工学院|军训会操展风采 英姿飒爽致青春",
              img:
                "https://img1.baidu.com/it/u=2411936867,3190531565&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500",
            },
            {
              title:
                "【学习强国】多彩校园 | 福州理工学院：校园的第一抹春色，来了！",
              img:
                "https://img0.baidu.com/it/u=458299798,2832687682&fm=253&fmt=auto&app=138&f=JPG?w=500&h=333",
            },
          ],
        },
        {
          label: "活动",
          imgSrc: [
            {
              title: "福理校园 | 社团活动",
              img:
                "https://img0.baidu.com/it/u=182459026,1315847722&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500",
            },
            {
              title: "福理校园 | 知名企业汇聚FIT ",
              img:
                " https://img2.baidu.com/it/u=3698392836,2308925689&fm=253&fmt=auto&app=138&f=JPEG?w=722&h=500",
            },
          ],
        },
        {
          label: "运动会",
          imgSrc: [
            {
              title: "福理校园 | 运动启动仪式",
              img:
                "https://img0.baidu.com/it/u=133412729,510592756&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
            },
            {
              title: " 福州理工学院文化活动总汇 | 强势围观!",
              img:
                "https://img1.baidu.com/it/u=4212901244,3830775309&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
            },
          ],
        },
        {
          label: "餐厅",
          imgSrc: [
            {
              title: "福理校园 | 网红餐厅",
              img:
                "http://www.fit.edu.cn/images/up_images/20200311090008118.jpg",
            },
            {
              title: "福理校园 | 网红餐厅",
              img:
                " http://www.fit.edu.cn/images/up_images/20200311090008119.jpg",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.desc {
  margin-top: 30px;
  height: 70px;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 0 0 20px 20px;
  z-index: 3;
}

img:hover~.desc {
  top: 87%;
}

@media (max-width: 768px) {
  img:hover~.desc {
    top: 75%;
  }
}
</style>
